<template>
	<uni-popup ref="shippingPopup" background-color="#fff" @change="popupChange">
		<view class="popup_content">
			<view class="box">
				<view class="close" @click="popupClose">
					<image class="image" mode="aspectFill" src="/static/home/close_border.png"></image>
				</view>
				<view class="popTop">
					<text class="text">发货</text>
				</view>
				<view class="shippingContent">
					<view class="shippingItem">
						<text>物流单号</text>
						<view>
							<input placeholder="请填写物流单号!" v-model="waybillNum" :disabled="!(type==='shipping')" />
							<uni-icons type="scan" size="30" @click="scanWaybill" v-if="type==='shipping'"></uni-icons>
						</view>
					</view>
					<view class="shippingItem">
						<text>承运方</text>
						<view>
							<uni-data-select placeholder="请选择物流公司名称!" :localdata="waybillCompany" v-model="waybillName"
								:disabled="!(type==='shipping')" />
						</view>
					</view>
					<view class="shippingItem">
						<text>快照</text>
						<view>
							<image v-if="type==='check'" mode="aspectFit" :src="waybillPic || '/static/placeholder.png'"></image>
							<uni-file-picker v-else ref="files" :auto-upload="false" limit="1" @select="selectWaybill"
								:disabled="!(type==='shipping')">
							</uni-file-picker>
						</view>
					</view>
				</view>
				<view class="orderContent">
					<view class="address">
						<view class="title">收货信息<text
								@click="copyOrderNo(`${receiveInfo.name} ${receiveInfo.phone} ${receiveInfo.region_str} ${receiveInfo.address}`)">复制</text>
						</view>
						<view class="info" v-if="receiveInfo">
							<view class="top">
								<text>{{receiveInfo.name}}</text>
								<text>{{formatPhone(receiveInfo.phone)}}</text>
							</view>
							<view class="bottom">
								<text>{{`${receiveInfo.region_str} ${receiveInfo.address}`}}</text>
							</view>
						</view>
					</view>
					<view class="orderInfo">
						<view class="title">订单信息</view>
						<block v-if="proList&&proList.length>0">
							<block v-for="(pro, index) in proList" :key="index">
								<view class="productItem" v-if="pro.productInfo&&pro.spuInfo">
									<view class="itemLeft">
										<image mode="aspectFit" :src="pro.productInfo.thumb || '/static/placeholder.png'"></image>
									</view>
									<view class="itemRight">
										<view class="name">{{pro.productInfo.name}}</view>
										<view class="priceNum">
											<view class="price">
												<text>￥</text>
												<text v-if="$store.state.login.role===1">{{formatPrice(pro.spuInfo.price_active)}}</text>
												<text v-if="$store.state.login.role===2">{{formatPrice(pro.spuInfo.price_vip)}}</text>
												<text v-if="$store.state.login.role===9">{{formatPrice(pro.spuInfo.price_vip)}}</text>
												<text>￥</text>
												<text>{{formatPrice(pro.spuInfo.price_original)}}</text>
											</view>
											<view class="num">
												<text>x{{pro.count}}</text>
											</view>
										</view>
									</view>
								</view>
							</block>
						</block>
						<view class="infoItem">
							<view class="itemLeft">商品数</view>
							<view class="itemRight">{{orderInfo.total_count}}件</view>
						</view>
						<view class="infoItem">
							<view class="itemLeft">商品总价</view>
							<view class="itemRight">￥{{formatPrice(orderInfo.total_money)}}</view>
						</view>
						<view class="infoItem">
							<view class="itemLeft">商品优惠</view>
							<view class="itemRight txtGold" v-if="$store.state.login.role===1">
								减￥{{formatPrice(orderInfo.active_discount)}}</view>
							<view class="itemRight txtGold" v-if="$store.state.login.role===2">
								减￥{{formatPrice(orderInfo.vip_discount)}}</view>
							<view class="itemRight txtGold" v-if="$store.state.login.role===9">
								减￥{{formatPrice(orderInfo.vip_discount)}}</view>
						</view>
						<view class="infoItem">
							<view class="itemLeft">优惠券</view>
							<view class="itemRight txtGold">减￥{{formatPrice(orderInfo.ticket_discount)}}</view>
						</view>
						<view class="infoItem">
							<view class="itemLeft">会员九折优惠</view>
							<view class="itemRight goldBtn" v-if="$store.state.login.role===1">--</view>
							<view class="itemRight txtGold" v-else>减￥{{formatPrice(orderInfo.vip90_discount)}}</view>
						</view>
						<view class="infoItem">
							<view class="itemLeft txtGold">共减</view>
							<view class="itemRight txtGold">￥{{formatPrice(orderInfo.total_discounttotal_discount)}}</view>
						</view>
						<view class="infoItem">
							<view class="itemLeft txtRed">实际支付</view>
							<view class="itemRight txtRed" v-if="orderInfo.pay_money">￥{{formatPrice(orderInfo.pay_money)}}</view>
							<view class="itemRight txtRed" v-else>￥{{formatPrice(orderInfo.need_money)}}</view>
						</view>

						<view class="infoItem">
							<view class="itemLeft">订单编号</view>
							<view class="itemRight">{{orderInfo._id}}<text @click="copyOrderNo(orderInfo._id)">复制</text></view>
						</view>
						<view class="infoItem">
							<view class="itemLeft">交易号</view>
							<view class="itemRight" v-if="orderInfo.notify_info">{{orderInfo.notify_info.transactionId}}</view>
							<view class="itemRight txtRed" v-else>--</view>
						</view>
						<view class="infoItem">
							<view class="itemLeft">创建时间</view>
							<view class="itemRight">{{formatDate(orderInfo.create_time)}}</view>
						</view>
						<view class="infoItem">
							<view class="itemLeft">支付时间</view>
							<view class="itemRight">{{formatDate(orderInfo.pay_time)}}</view>
						</view>
						<view class="infoItem">
							<view class="itemLeft">积分</view>
							<view class="itemRight">+10</view>
						</view>
					</view>
				</view>

				<view class="btns">
					<button size="default" v-if="orderInfo.status==='2'&&type==='shipping'" type="default" class="btnDefault"
						hover-class="btnHover" :disabled="!(waybillNum&&waybillName&&waybillPic)" @click="toShipping">
						立即发货
					</button>
					<button size="default" v-if="type==='check'" type="default" class="btnDefault" hover-class="btnHover"
						@click="popupClose">
						查看
					</button>
				</view>
			</view>
		</view>
	</uni-popup>
</template>

<script>
	import mixins from '@/common/mixins.js';
	export default {
		props: {},
		mixins: [mixins],
		data() {
			return {
				orderInfo: {},
				receiveInfo: null,
				proList: null,
				type: "",
				waybillCompany: [],
				waybillNum: "",
				waybillName: "",
				waybillPic: "",
				percentCompleted: 0
			};
		},
		methods: {
			async getWaybillCompany() {
				const listRes = await this.$uniCloudCallFunction({
					name: 'xxf-enum',
					action: 'getWaybillCompany',
					data: {
						uid: this.$store.state.login.uid,
						type: "waybillCompany"
					}
				});
				console.log("listRes: ", listRes);
				if (listRes && listRes.list) {
					this.waybillCompany = listRes.list || [];
				} else {
					this.waybillCompany = [];
				}
			},
			popupOpen(e) {
				console.log("popupOpen: ", e);
				this.orderInfo = e.orderInfo;
				this.receiveInfo = e.orderInfo.receive_info || null;
				this.proList = e.orderInfo.product_list || [];
				this.type = e.type || "check";
				if (this.type === "check") {
					this.waybillNum = this.orderInfo.waybill_num;
					this.waybillName = this.orderInfo.waybill_name;
					this.waybillPic = this.orderInfo.waybill_pic;
				}
				this.getWaybillCompany();
				this.$refs.shippingPopup.open("bottom");
			},
			popupClose() {
				this.$refs.shippingPopup.close();
			},
			popupChange(e) {
				this.$emit('popupChange', e);
			},
			proNumMinus() {
				if (this.proNum > 1) this.proNum--;
			},
			proNumPlus() {
				this.proNum++;
			},
			spuChange(e) {
				this.spuSel = e || {};
			},
			scanWaybill() {
				const self = this;
				uni.scanCode({
					success: (res) => {
						// 扫码成功回调
						console.log('扫码结果: ' + res.result);
						console.log('条形码类型: ' + res.scanType);
						// 这里可以根据res.result来处理后续业务逻辑
						// self.$utils.showToast(self, {
						// 	message: res.result,
						// 	duration: 3000,
						// });
						this.waybillNum = res.result;
					},
					fail: (err) => {
						// 扫码失败回调
						console.error('扫码失败: ', err);
					}
				});
			},
			async selectWaybill(e) {
				console.log('选择文件：', e);
				const self = this;
				if (e.tempFiles.length > 0) {
					let filePath = e.tempFiles[0].path;
					// promise方式
					const cloudPath = `waybill/${this.orderInfo._id}.${e.tempFiles[0].extname}`;
					const result = await uniCloud.uploadFile({
						filePath,
						cloudPath,
						onUploadProgress: function(progressEvent) {
							const percentCompleted = Math.round(
								(progressEvent.loaded * 100) / progressEvent.total
							);
							console.log(percentCompleted);
							self.percentCompleted = percentCompleted;
						}
					});
					console.log('选择文件 uploadFile：', result);
					if (result.fileID) {
						const urlRes = await uniCloud.getTempFileURL({
							fileList: [result.fileID]
						});
						console.log('选择文件 getTempFileURL：', urlRes);
						if (urlRes.fileList && urlRes.fileList.length) {
							this.waybillPic = urlRes.fileList[0].tempFileURL;
						}
					}
				}
			},
			copyOrderNo(value) {
				// 设置剪贴板内容
				uni.setClipboardData({
					data: value,
					success: () => {
						console.log('copyOrderNo success : ', value);
					}
				});
				// 获取剪贴板内容
				// uni.getClipboardData({
				// 	success(res) {
				// 		console.log(res.data);
				// 	}
				// }); 
			},
			async toShipping() {
				const e = {
					waybillNum: this.waybillNum,
					waybillName: this.waybillName,
					waybillPic: this.waybillPic,
				}
				console.log("toShipping: ", e);
				const getRes = await this.$uniCloudCallFunction({
					name: "xxf-order",
					action: "shippingOrder",
					data: {
						uid: this.$store.state.login.uid,
						token: this.$store.state.login.token,
						openId: this.$store.state.login.openId,
						order_id: this.orderInfo._id,
						transactionId: this.orderInfo.notify_info.transactionId,
						waybill_name: this.waybillName,
						waybill_num: this.waybillNum,
						waybill_pic: this.waybillPic,
					}
				});
				console.log("getRes: ", getRes);
				if (getRes) {
					this.$emit('shippingSuccess', e);
					this.popupClose();
				}
			}
		}
	}
</script>

<style lang="scss" scoped>
	.popup_content {
		width: 100%;
		background: #fff;

		.box {
			width: 100%;
			background: #ffffff;
			display: flex;
			flex-direction: column;
			align-items: center;

			.close {
				width: 60rpx;
				height: 60rpx;
				border-radius: 50%;
				background: $uni-primary;
				display: flex;
				justify-content: center;
				align-items: center;
				position: absolute;
				top: 10rpx;
				right: 30rpx;

				>.image {
					width: 100%;
					height: 100%;
				}
			}

			.popTop {
				margin-top: 30rpx;
				width: 100%;
				height: 60rpx;
				text-align: center;

				>.text {
					font-weight: 500;
					font-size: 32rpx;
					color: $uni-base-color;
				}
			}

			.shippingContent {
				padding-bottom: 6rpx;
				width: 100%;
				display: flex;
				flex-direction: column;
				align-items: center;
				border-bottom: 2rpx solid #eee;

				.shippingItem {
					margin: 10rpx 0;
					width: 690rpx;
					display: flex;
					flex-direction: row;
					justify-content: space-between;
					align-items: center;

					>text {
						width: 140rpx;
						font-weight: 400;
						font-size: 28rpx;
						color: $uni-base-color;
						line-height: 68rpx;
					}

					>view {
						width: 550rpx;
						display: flex;
						flex-direction: row;
						justify-content: space-between;
						align-items: center;

						>input {
							padding: 0 20rpx;
							width: 100%;
							height: 68rpx;
							background: #fff;
							font-size: 24rpx;
							font-weight: 400;
							color: $uni-main-color;
							border: 2rpx solid #e5e5e5;
							border-radius: 8rpx;
						}

						>uni-data-select {
							width: 100%;
							height: 68rpx;
							background: #fff;
							font-size: 28rpx;
							font-weight: 400;
							color: $uni-main-color;
							border-radius: 8rpx;
						}

						>image {
							width: 144rpx;
							height: 144rpx;
						}
					}
				}
			}

			.orderContent {
				margin-top: 6rpx;
				padding: 10rpx 0;
				width: 100%;
				height: 540rpx;
				// max-height: 50vh;
				overflow: auto;
				display: flex;
				flex-direction: column;
				align-items: center;

				.address {
					width: 690rpx;
					border-radius: 20rpx;
					border: 2rpx solid $uni-bg-color;
					box-shadow: 0rpx 8rpx 16rpx 0rpx $uni-bg-color;
					background: #fff;
					display: flex;
					flex-direction: column;

					.title {
						padding: 20rpx 30rpx;
						font-weight: 400;
						font-size: 28rpx;
						color: $uni-secondary-color;
						display: flex;
						flex-direction: row;
						justify-content: space-between;
						align-items: center;

						>text {
							padding: 4rpx 12rpx;
							color: $xxf-blue;
						}
					}

					.info {
						padding: 0 30rpx;
						width: calc(100% - 60rpx);

						.top,
						.bottom {
							width: 100%;
							display: flex;
							flex-direction: row;

							>text {
								font-weight: bold;
								font-size: 36rpx;
								color: $uni-main-color;
							}
						}

						.bottom {
							margin-top: 16rpx;
							margin-bottom: 30rpx;

							>text {
								font-weight: 500;
								font-size: 24rpx;
								color: $uni-base-color;
							}
						}
					}
				}

				.orderInfo {
					margin-top: 10rpx;
					padding-bottom: 20rpx;
					width: 690rpx;
					border-radius: 20rpx;
					border: 2rpx solid $uni-bg-color;
					box-shadow: 0rpx 8rpx 16rpx 0rpx $uni-bg-color;
					background: #fff;
					display: flex;
					flex-direction: column;

					.title {
						padding: 20rpx 30rpx;
						font-weight: 400;
						font-size: 28rpx;
						color: $uni-secondary-color;
					}

					.productItem {
						margin: 10rpx 20rpx;
						width: calc(100% - 40rpx);
						display: flex;
						flex-direction: row;
						justify-content: space-between;
						align-items: center;

						.itemLeft {
							background: $uni-bg-color;
							border-radius: 16rpx;
							overflow: hidden;
							display: flex;
							justify-content: center;
							align-items: center;

							>image {
								width: 200rpx;
								height: 200rpx;
								margin: 0;
								padding: 0;
							}
						}

						.itemRight {
							padding-left: 20rpx;
							width: calc(100% - 220rpx);
							display: flex;
							flex-direction: column;

							.name {
								width: 100%;
								height: 86rpx;
								font-weight: bold;
								font-size: 32rpx;
								color: $uni-base-color;
								overflow: hidden;
								text-overflow: ellipsis;
								display: -webkit-box;
								-webkit-line-clamp: 2;
								word-break: break-all;
								-webkit-box-orient: vertical;
							}

							.priceNum {
								margin-top: 18rpx;
								width: 100%;
								display: flex;
								flex-direction: row;
								justify-content: space-between;
								align-items: center;

								.price {
									display: flex;
									flex-direction: row;
									align-items: baseline;

									>text {
										font-weight: 400;
										font-size: 24rpx;
										color: $uni-secondary-color;
									}

									>text:nth-child(1) {
										color: $xxf-red;
									}

									>text:nth-child(2) {
										color: $xxf-red;
										font-weight: bold;
										font-size: 28rpx;
										color: $xxf-red;
									}

									>text:last-child {
										text-decoration: line-through;
									}
								}

								.num {
									display: flex;
									flex-direction: row;
									align-items: center;

									>text {
										width: 40rpx;
										height: 38rpx;
										display: flex;
										flex-direction: row;
										justify-content: center;
										align-items: center;
										font-weight: bold;
										font-size: 24rpx;
										color: $uni-base-color;
									}

									>text:nth-child(1) {
										border: 2rpx solid #ebebeb;
										font-size: 28rpx;
										position: relative;
									}

									>text:nth-child(1)::before {
										content: '';
										position: absolute;
										top: -10rpx;
										right: -10rpx;
										bottom: -10rpx;
										left: -20rpx;
									}

									>text:nth-child(2) {
										border-top: 2rpx solid #ebebeb;
										border-bottom: 2rpx solid #ebebeb;
									}

									>text:nth-child(3) {
										border: 2rpx solid #ebebeb;
										font-size: 28rpx;
										position: relative;
									}

									>text:nth-child(3)::before {
										content: '';
										position: absolute;
										top: -10rpx;
										right: -20rpx;
										bottom: -10rpx;
										left: -10rpx;
									}
								}
							}
						}
					}

					.infoItem {
						padding: 0 30rpx;
						width: calc(100% - 60rpx);
						height: 58rpx;
						display: flex;
						flex-direction: row;
						justify-content: space-between;
						align-items: center;

						.itemLeft {
							font-weight: 400;
							font-size: 24rpx;
							color: $uni-base-color;
						}

						.itemRight {
							font-weight: 400;
							font-size: 28rpx;
							color: $uni-main-color;
							display: flex;
							flex-direction: row;
							justify-content: space-between;
							align-items: center;

							>text {
								padding: 4rpx 12rpx;
								color: $xxf-blue;
							}
						}

						.txtRed {
							color: $xxf-red;
						}

						.txtGold {
							color: $xxf-gold;
						}

						.goldBtn {
							padding: 0 16rpx;
							color: $xxf-gold;
							border: 2rpx solid $xxf-gold;
							border-radius: 30rpx;
						}
					}
				}

			}

			.btns {
				margin-top: 30rpx;
				padding: 30rpx;
				width: calc(100% - 60rpx);
				display: flex;
				flex-direction: row;
				justify-content: center;
				align-items: center;

				.btnDefault {
					width: 100%;
					height: 76rpx;
					background: $xxf-blue;
					box-shadow: none;
					border-radius: 38rpx;
					border-radius: 20rpx;
					font-weight: 400;
					font-size: 28rpx;
					color: #FFFFFF;
				}
			}
		}
	}
</style>